<template>
    <div class="warp" style="height:100%;">
        <navbar :title="title">
            <template #right>
                <div class="header-icon" v-if="isShowRotateIcon">
                    <i class="rotate-icon" @click="rotate"></i>
                </div>
            </template>
        </navbar>
        <div style="height: calc(100% - 56px);padding: 56px 0 0 0;">
            <iframe :src="url" style="height: 100%;" width="100%"  scrolling="yes" frameborder="0"/>
        </div>
    </div>
</template>

<script>
export default {
    name: 'docPage',
    data() {
        return {
            title: '', //标题
            url: '',
            isShowRotateIcon: false, // 是否显示旋转图标
            isRotate: false // 是否旋转，默认为竖屏

        };
    },
    mounted() {
        if (window.plus) {
            this.isShowRotateIcon = true;
        }
        this.title = window.localStorage.getItem('kbTitle');
        window.localStorage.removeItem('kbTitle');
        this.$axios({
            method: 'GET',
            url: `/app/idv/previewUrl`,
            params: {
                filePath: window.unescape(this.$route.query.docUrl)
            }
        }).then(res => {
            this.url = res.data;
        });
    },
    methods: {
        // 横屏
        onLandscape() {
            if (window.plus) {
                window.plus.screen.lockOrientation('landscape-primary');
            }
        },
        // 竖屏
        onPortrait() {
            if (window.plus) {
                window.plus.screen.lockOrientation('portrait-primary');
            }
        },
        /**
         * 旋转 */
        rotate() {
            this.isRotate = !this.isRotate;
            if (this.isRotate) {
                this.onLandscape(); // 横屏
            } else {
                this.onPortrait(); // 竖屏
            }
        }
    },
    destroyed() {
        this.onPortrait();
    }
};
</script>

<style scoped lang="less">
    .header-icon{
        width: 54px;
    }
    .rotate-icon{
        display: inline-block;
        width: 100%;
        height: 56px;
        background: url('../../../static/images/icon1.png') no-repeat;
        background-size: 35px;
        background-position: 5px;
    }
</style>
